<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="icon" href="/resources/favicon.ico">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/resources/css/public.css" media="all" />
</head>
<body style="margin:10px;">
<!-- 搜索条件开始 -->
<div align="center" shiro:hasPermission="user:view">
    <form class="layui-form" method="post" id="searchForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">真实姓名:</label>
                <div class="layui-input-inline">
                    <input type="text" name="name"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户部门:</label>
                <div class="layui-input-inline">
                    <select id="deptid" name="deptid">

                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-left:50px">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-radius layui-icon layui-icon-search" lay-submit lay-filter="doSearch"id="doSearch">查询</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-radius layui-icon layui-icon-refresh">重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 搜索条件结束 -->


<!-- 数据表格开始 -->
<table class="layui-hide" id="userTable" lay-filter="userTable" lay-data="{id: 'userTable'}" shiro:hasPermission="user:view"></table>
<!--表格工具条-->
<div style="display: none;" id="tableToolBar">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add" shiro:hasPermission="user:create">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete" shiro:hasPermission="user:delete">
        <i class="layui-icon">&#xe640;</i> 批量删除
    </button>
</div>
<!-- 行级工具条 -->
<div id="rowToolBar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="user:update">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="dispatchRole"shiro:hasPermission="user:selectRole">分配角色</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="user:delete">删除</a>
</div>
<!-- 数据表格结束 -->

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding:20px" id="saveOrUpdateDiv" >
    <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">所属部门:</label>
            <div class="layui-input-inline">
                <input type="hidden" name="id">
                <select name="deptid" lay-verify="required" autocomplete="off"
                        class="layui-input" id="deptid2">
                </select>
            </div>
            <label class="layui-form-label">排序编码:</label>
            <div class="layui-input-inline">
                <input name="ordernum" placeholder="请输入排序编码" class="layui-input"></input>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">领导部门:</label>
            <div class="layui-input-inline">
                <select name="leaderdeptid" lay-verify="required" autocomplete="off"
                        class="layui-input" id="deptid3" lay-filter="deptid3">
                </select>
            </div>
            <label class="layui-form-label">领导姓名:</label>
            <div class="layui-input-inline">
                <select name="mgr" id="leaderName" class="layui-input">

                </select>
            </div>
        </div>
        <div class="layui-form-item" style="width:600px">
            <label class="layui-form-label">入职时间:</label>
            <div class="layui-input-block">
                <input name="hiredate" id="hiredate" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户姓名:</label>
            <div class="layui-input-inline">
                <input name="name" id="name" required placeholder="请输入用户姓名" class="layui-input"></input>
            </div>
            <label class="layui-form-label">登录名称:</label>
            <div class="layui-input-inline">
                <input name="loginname" id="loginname" disabled class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户性别:</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="1" checked="checked" title="男">
                <input type="radio" name="sex" value="0" title="女">
            </div>
            <label class="layui-form-label">是否可用:</label>
            <div class="layui-input-inline">
                <input type="radio" name="available" value="1" checked="checked" title="可用">
                <input type="radio" name="available" value="0" title="不可用">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户备注:</label>
            <textarea name="remark" placeholder="请输入" class="layui-textarea" style="width:500px"></textarea>
        </div>

        <div class="layui-form-item" style="margin:10px 140px 0">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-submit lay-filter="doSubmit">提交</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
            </div>
        </div>
    </form>

</div>

<!-- 添加和修改的弹出层结束 -->
<!-- 分配角色的弹出层开始 -->
<div style="display: none;padding: 20px" id="dispatchRoleDiv" >
    <table class="layui-hide" id="roleTable" lay-filter="roleTable" lay-data="{id: 'roleTable'}"></table>
</div>
<!-- 分配角色的弹出层结束 -->
<script src="/resources/layui/layui.js"></script>
<script type="text/javascript">
    var tableIns;
    var select="";
    layui.use([ 'jquery', 'layer', 'form','table','laydate'], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#hiredate' //指定元素
        });


        //渲染用户数据表格
        tableIns = table.render({
            elem : '#userTable', //渲染的目标对象
            url : '/sys/user/loadUser', //数据接口
            title : '用户数据表',//数据导出来的标题
            toolbar : "#tableToolBar", //表格的工具条
            defaultToolbar : [ 'filter','exports','print' ],
            height : 'full-78',
            cellMinWidth : 100, //设置列的最小默认宽度
            done : function(res, curr, count) {
                if(res.data.length==0&&curr!=1){
                    tableIns.reload({
                        page:{
                            curr:curr-1
                        }
                    })
                }
            },
            totalRow : false, //开启合并行
            page : true, //是否启用分页
            text : {
                none : '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            cols : [ [ //列表数据
                {type : 'checkbox',fixed : 'left'},
                {field:'id',title:'ID',align:'center',width:'50'},
                {field : 'name',title : '姓名',align:'center',width:'100'},
                {field : 'sex',title : '性别',align : 'center',width:'80',
                    templet : function(d) {
                        return d.sex == '1' ? '男' : '女';
                    }},
                {field :'deptname',title:'所属部门',align : 'center',width:'150'},
                {field :'leadername',title:'上级领导',align : 'center',width:'100'},
                {field : 'hiredate',title : '入职时间',align:'center',width:'240'},
                {field : 'type',title : '用户类型',align : 'center',width:'120',
                    templet : function(d) {
                        return d.type == '0' ? '<font color=red>超级管理员</font>' : d.type == '1'? '<font color=blue>管理员</font>':'<font color=red>普通用户</font>';
                    }},
                {field :'loginname',title:'登录名',align : 'center',width:'100'},
                {field :'ordernum',title:'排序码',align : 'center',width:'100'},
                {field : 'remark',title : '备注',align:'center',width:'200'},
                {field : 'available',title : '是否可用',align : 'center',width:'90',
                    templet : function(d) {
                        return d.available == '1' ? '<font color=blue>可用</font>' : '<font color=red>不可用</font>';
                    }
                },
                {fixed : 'right',title : '操作',toolbar:'#rowToolBar',width :'200',align:'center'}
            ] ]
        });


        $("#name").blur(function(){
            var name= $("#name").val();
            var url = "/sys/user/getLoginname?name="+name;
            $.get(url,function(result){
                $("#loginname").val(result);
            });
        });
        function searchDept(){
            //页面加载后顶部搜索表单的部门下拉框渲染
            select = loadDept(0);
            $("#deptid").html(select);
            form.render();
        }

        searchDept();


        //顶部模糊查询
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });


    //监听头部工具栏事件
        table.on("toolbar(userTable)",function(obj){
            switch(obj.event){
                case 'add':
                    openAddUser();
                    break;
                case 'batchDelete':
                    batchDeleteUser();
                    break;
            };
        })
        var lineData;
        //监听行工具事件
        table.on('tool(userTable)', function(obj){
            lineData = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'del'){ //删除
                deleteSingleUser(lineData);
            } else if(layEvent === 'edit'){ //编辑
                openUpdateUser(lineData);
            }else if(layEvent === 'dispatchRole'){
                openDispatchRole(lineData);
            }
        });
        var url;
        var mainIndex;
        //打开添加页面
        function openAddUser(){
            mainIndex = layer.open({
                type:1,
                title:'添加用户',
                content:$("#saveOrUpdateDiv"),
                area:['700px','500px'],
                success:function(index){
                    //清空修改页面使用过的表单数据
                    $("#dataFrm")[0].reset();
                    //为弹框中表单提交传递提交地址
                    url="/sys/user/addUser"
                    //添加页面打开后渲染员工部门,领导部门下拉框
                    $("#deptid2").html(loadDept(0));
                    $("#deptid3").html(loadDept(0));
                    $("#leaderName").html("");
                    laydate.render({
                        elem: '#hiredate' //指定元素
                    });
                }
            });
        }

        //添加页面,选中领导部门后,根据选中的部门id渲染部门对应的领导
        //根据deptid查询用户

        //打开修改页面
        function openUpdateUser(data){
            mainIndex=layer.open({
                type:1,
                title:'修改用户',
                content:$("#saveOrUpdateDiv"),
                area:['700px','465x'],
                success:function(index){
                    form.val("dataFrm",data);
                    url="/sys/user/updateUser";
                    //打开修改页面也需要领导部门的渲染,同时选中对应的部门
                    select = loadDept(data.deptid)
                    $("#deptid2").html(select);
                    select = loadDept(data.leaderdeptid);
                    $("#deptid3").html(select);
                    select = loadLeaderName(data.leaderdeptid,data.mgr);
                    $("#leaderName").html(select);
                    form.render();
                }
            });
        }


        //领导部门选中后,触发领导姓名的查询
        form.on('select(deptid3)', function(data){
            //查询出对应的领导姓名等
            select = loadLeaderName(data.value, 0)
            $("#leaderName").html(select);
            form.render();
        });
        //左侧选中后触发右侧的查询-查询渲染过程中,对id相等的selected
        //综合来看,需要部门的渲染,部门下拉框选中触发,右侧的渲染
        //-------------------------------------
        //渲染部门下拉框
        //id 要selected的id,用于修改
        //select 渲染的<select>Jquery对象
        function loadDept(id){
            $.ajaxSettings.async = false;
            //渲染部门下拉框
            var option = "<option value=\"0\">请选择</option>";
            $.get("/sys/dept/getDept",function(result){
                $.each(result,function(i,e){
                    if(e.id==id){
                        option+="<option selected value="+e.id+">"+e.title+"</optionselect>";
                    }else{
                        option+="<option value="+e.id+">"+e.title+"</option>";
                    }
                })
            });
            return option;
            $.ajaxSettings.async = true;
        }
        //渲染领导名的select id领导的id(mgr)
        function loadLeaderName(leaderdeptid,leaderid){
            $.ajaxSettings.async = false;
            //根据部门查询用户
            var option = "";
            $.post("/sys/user/getUserByDeptid",{'deptid':leaderdeptid},function(result){
                $.each(result,function(i,e){
                    if(e.id==leaderid){
                        option+="<option selected value="+e.id+">"+e.name+"</option>";
                    }else{
                        option+="<option value="+e.id+">"+e.name+"</option>";
                    }
                })
            });
            return option;
            $.ajaxSettings.async = true;
        }

        //表单提交数据
        form.on("submit(doSubmit)",function(result){
            //序列化表单数据
            var formData=$("#dataFrm").serialize();
            var deptid = $("#deptid2").val();
            if(deptid=='0'){
                layer.alert("所属部门不能为空", {
                    icon: 0
                })
            }else{
                $.post(url,formData,function(result){
                    //弹出操作情况数据msg-->封装数据处理请求返回的信息
                    var code = result.code;
                    var msg = result.msg;
                    if(code>0){
                        layer.close(mainIndex);
                        layer.alert(result.msg, {
                            icon: 1
                        })
                        tableIns.reload();
                    }else{
                        layer.alert(result.msg, {
                            icon: 0
                        })
                    }
                })
            }
        })

        //删除单个用户
        function deleteSingleUser(data){
            var url = "/sys/user/deleteUser";
            layer.confirm('确认删除['+data.name+']用户吗？', function(index){
                $.post(url,data,function(result){
                    if(result.code>0){
                        layer.alert(result.msg,{
                            icon:1
                        });
                        tableIns.reload();
                    }else{
                        layer.alert(result.msg,{
                            icon:0
                        });
                    }
                });
            });
        }
        //批量删除用户-->传userids过去-->联想复选框传一个name对应多个值
        function batchDeleteUser(){
            var checkStatus = table.checkStatus('userTable');
            var data = checkStatus.data;
            var params = "";
            //拼接多个值但是是一个name名
            $.each(data,function(i,e){
                if(i==0){
                    params+="userids="+e.id;
                }else{
                    params+="&userids="+e.id;
                }
            });
            layer.confirm("真的要删除选中的这些用户吗?",function(){
                $.post("/sys/user/deleteBatchUser",params,function(result){
                    if(result.code>0){
                        layer.alert(result.msg,{
                            icon:1
                        });
                    }else{
                        layer.alert(result.msg,{
                            icon:0
                        });
                    }
                    //刷新数据表格
                    tableIns.reload();
                });
            });
        }
        //渲染角色数据表格--分配角色弹出层中
        function renderRoleTable(data){
            table.render({
                elem : '#roleTable', //渲染的目标对象
                url : '/sys/user/loadRoleByUserid?userid='+data.id, //数据接口
                title : '角色数据表',//数据导出来的标题
                height : 'full-50',
                cellMinWidth : 100, //设置列的最小默认宽度
                done : function(res, curr, count) {

                },

                totalRow : false, //开启合并行
                text : {
                    none : '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                },
                cols : [ [ //列表数据
                    {type : 'checkbox',fixed : 'left'},
                    {field:'id',title:'ID',align:'center',width:'50'},
                    {field :'name',title:'角色名称',align : 'center',width:'130'},
                    {field : 'remark',title : '角色备注',align:'center',width:'218'},
                    {field : 'available',title : '是否可用',align : 'center',width:'90',
                        templet : function(d) {
                            return d.available == '1' ? '<font color=blue>可用</font>' : '<font color=red>不可用</font>';
                        }},
                ] ]
            });

        }
        //打开分配角色页面
        var menuTree;
        function openDispatchRole(data){
            mainIndex=layer.open({
                type:1,
                title:'分配角色',
                content:$("#dispatchRoleDiv"),
                area:['600px','400px'],
                btnAlign:'c',
                btn:['<div class="layui-icon layui-icon-release">确认分配</div>',
                    '<div class="layui-icon layui-icon-close">取消分配</div>'],
                yes:function(index,layer){
                    dispatchRole(data);
                },
                success:function(index){
                    //渲染数据表信息
                    renderRoleTable(data);
                }
            });
        }
        //提交分配用户
        function dispatchRole(data){
            var checkStatus = table.checkStatus('roleTable'); //idTest 即为基础参数 id 对应的值
            var checkData = checkStatus.data //获取选中行的数据
            var params="userid="+data.id;
            $.each(checkData,function(i,e){
                params+="&roleids="+e.id;
            });
            var url = "/sys/user/dispatchUserRole";
            $.post(url,params,function(result){
                if(result.code>0){
                    //关闭分配角色的弹窗
                    layer.close(mainIndex);
                    //提示分配成功
                    layer.alert(result.msg,{
                        icon:1
                    });
                    //数据表更新
                    tableIns.reload();
                }else{
                    layer.alert(result.msg,{
                        icon:0
                    });
                }
            });
        }
    });

</script>

</body>
</html>